<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
<script src="../vue.js"></script>
</head>

<body>
<div id="app">

<input type="text" v-model="search"/>
<ul>
    <li v-for="item in newPerson" :key="item.id">
        {{item.name}} --{{item.age}}
    </li>
</ul>
</div>
<script>
    Vue.config.productionTip=false;

    const vm =new Vue({
        el:"#app",
        data() {
            return {
                search:"",
                person:[
              { id: "001", name: "laowang", age: 18 },
              { id: "002", name: "xiaowang", age: 12 },
              { id: "003", name: "dawang", age: 33 },
              { id: "004", name: "xiaohuang", age: 6 },
                ]
            }
        },
        computed:{
            newPerson() {
                return this.person.filter((item)=>{
                    return item.name.includes(this.search);
                });
            },
        },
    });
 </script>
</body>

</html>